<template>
  <div class="wrapper">
    <el-form>
      <el-form-item>
        <el-button type="primary"
          size="small"
          class="fr"
          @click="addGroup"
          v-has="'platoonmanageaddchange'">新增排班组</el-button>
      </el-form-item>
      <el-form-item class="easy-table">
        <el-table :data="manageList"
          style="width: 100%"
          max-height="600">
          <el-table-column prop="name"
            label="名称"
            min-width="50">
          </el-table-column>
          <el-table-column prop="personNum"
            label="排班人数"
            min-width="50">
          </el-table-column>
          <el-table-column prop="type"
            label="排班类型"
            min-width="100">
          </el-table-column>
          <el-table-column label="排班组负责人"
            min-width="200">
            <template slot-scope="scope">
              <el-popover trigger="hover"
                placement="top">
                <p style="min-width:300px; max-width:400px">
                  <el-tag :key="index"
                    class="tag"
                    disable-transitions
                    v-for="(tag,index) in scope.row.names ? scope.row.names.split(',') : []">
                    {{tag}}
                  </el-tag>
                </p>
                <div slot="reference"
                  class="name-wrapper">
                  <el-tag size="medium"
                    disable-transitions
                    style="white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;width:300px">{{ scope.row.names }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="排班时间"
            min-width="100">
            <template slot-scope="scope">
              <p v-for="(item,index) in scope.row.times"
                :key="index">{{item.time}} ({{xqList[index]}})</p>
            </template>
          </el-table-column>
          <el-table-column fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button type="text"
                size="small"
                @click="editPlatoon(scope.row.id)"
                v-if="scope.row.typeId == 1"
                v-has="'platoonmanageschedule'">编辑排班</el-button>
              <el-button type="text"
                size="small"
                @click="edit(scope.row)"
                v-has="'platoonmanageaddchange'">修改</el-button>
              <el-button type="text"
                size="small"
                @click="_delete(scope.row.id)"
                v-has="'platoonmanagedelete'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 新增修改排班组弹窗 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="600px"
      v-if="dialogVisible"
      class="editDialog">
      <el-form label-width="150px"
        style="width:100%;">
        <el-form-item label="排班组名称：">
          <el-input placeholder="请输入排班组名称"
            v-model="name"
            v-filterSpecialChar="name"
            maxlength="12"></el-input>
        </el-form-item>
        <el-form-item label="参与排班部门：">
          <el-tag :key="index"
            class="tag"
            disable-transitions
            v-for="(item,index) in deptIds">
            {{item.deptName}}
          </el-tag>
          <el-button class="button-new-tag"
            size="small"
            @click="selectDept">+ 部门</el-button>
        </el-form-item>
        <el-form-item label="排班负责人：">
          <el-tag :key="index"
            class="tag"
            disable-transitions
            v-for="(item,index) in userIds">
            {{item.name}}
          </el-tag>
          <el-button class="button-new-tag"
            size="small"
            @click="selectMember">+ 负责人</el-button>
        </el-form-item>
        <el-form-item label="排班类型：">
          <el-radio-group v-model="typeId">
            <el-radio label="1">排班班制</el-radio>
            <el-radio label="2">固定班次</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="固定排班班次选择："
          v-show="typeId == 2">
          <ul>
            <li v-for="(item,index) in gdDataList"
              :key="index">
              <span>{{item.title}}</span>
              <el-select v-model="item.value"
                placeholder="请选择">
                <el-option v-for="item in pullList"
                  :key="item.id"
                  :label="item.time"
                  :value="item.id">
                </el-option>
              </el-select>
            </li>
          </ul>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="_sureGroup">确 定</el-button>
      </span>
    </el-dialog>
    <!--编辑排班弹窗-->
    <el-dialog title="编辑排班"
      :visible.sync="dialogGroupVisible"
      width="1300px"
      class="editDialog"
      :before-close="close">
      <el-form :inline="true">
        <el-form-item label="日期：">
          <el-date-picker v-model="dates"
            type="month"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="dateChange"
            :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="楼层：">
          <el-select v-model="floorId"
            placeholder="请选择楼层"
            @change="_schedule">
            <el-option value=""
              label="全部"></el-option>
            <el-option v-for="item in floorList"
              :key="item.floorId"
              :label="item.floor"
              :value="item.floorId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员：">
          <el-input v-model="searchKey"
            placeholder="请输入成员"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click.native="_schedule"
            class="searc"
            style=" line-height: 32px;padding: 0 21px;">
            <i class="el-icon-search"></i>
          </el-button>
          <el-button type="primary"
            size="small"
            @click="_suerTable"
            v-has="'platoonmanagetable'">
            保存
          </el-button>
          <el-button type="primary"
            size="small"
            @click="_schedule(1)">
            还原
          </el-button>
        </el-form-item>
        <el-form-item>
          <table>
            <!-- 日期 -->
            <tr>
              <td :colspan="tableHeaderList.length+1"
                style="border:none">{{monthStr}}月排班表</td>
            </tr>
            <tr style="background:#f2f2f2">
              <td>姓名/日期</td>
              <td v-for="(item,index) in tableHeaderList"
                :key="index">
                <span :class="{'isToday': item.xq.isToday,'isWeekend' :item.xq.isWeekend}">{{item.rq.rq}}</span>
              </td>
            </tr>
            <!-- 星期-->
            <tr style="background:#f2f2f2">
              <td>星期</td>
              <td v-for="(item,index) in tableHeaderList"
                :key="index">
                <span :class="{'isToday': item.xq.isToday,'isWeekend' :item.xq.isWeekend}">{{item.xq.xq}}</span>
              </td>
            </tr>
            <tr v-for="(item,index) in personNameList"
              :key="index">
              <td>{{item.name}}</td>
              <td v-for="(i,ii) in item.schedulingList"
                :key="ii"
                class="hover"
                @click="_editRule(ii,item)"
                :class="{disable: new　Date(i.schedulingDate).getTime() < todayDate}">
                <span :class="{'isToday': i.today,'isWeekend' :i.weekend}">{{i.ruleSimple}}</span>
              </td>
            </tr>
            <tr v-for="(item,index) in sumList"
              :key="index">
              <td>
                {{item.simple}}
              </td>
              <td v-for="(item,index) in item.sums"
                :key="index">{{item.sum}}</td>
            </tr>
          </table>
        </el-form-item>
      </el-form>

    </el-dialog>
    <!-- 选择部门 -->
    <el-dialog title="部门选择"
      :visible.sync="departmenVisible">
      <ul class="wrap">
        <li v-for="item in platioonDepts"
          :key="item.deptId">
          <p>
            <el-checkbox v-model="item.check">
              <span class="title">{{item.deptName}}</span>
            </el-checkbox>
          </p>
        </li>
      </ul>

      <span slot="footer"
        class="dialog-footer">
        <el-button @click="departmenVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="_sureDepartment">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 负责人选择 -->
    <el-dialog title="排班负责人选择"
      :visible.sync="responsibleVisible">
      <!-- <ul class="wrap">
        <li v-for="item in platioonDepts"
          :key="item.deptId">
          <p>
            <span class="title">{{item.deptName}}</span>
          </p>
          <ul class="memberList clearfix">
            <li v-for="item in item.memberList"
              :key="item.userId">
              <el-checkbox v-model="item.check">{{item.name}}</el-checkbox>
            </li>
          </ul>
        </li>
      </ul> -->
      <el-collapse v-model="activeNames">
        <el-collapse-item 
          :name="index"
          v-for="(item,index) in platioonDepts"
          :key="index"
          v-if="item.memberList.length">
          <template slot="title">
            <span>{{item.deptName}}</span>
            <i class="header-icon el-icon-info"></i>
          </template>
          <el-checkbox v-model="item.check"
            v-for="item in item.memberList"
            :key="item.userId">{{item.name}}</el-checkbox>
        </el-collapse-item>

      </el-collapse>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="responsibleVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="_sureMember">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择排班规则 -->
    <el-dialog :visible.sync="selectRuleVisible"
      width="400px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="按天排班"
          name="first">
          <ul class="rule-list">
            <li v-for="item in nextList"
              :key="item.id"
              @click="setRule(item)">
              <span>{{item.time}}</span>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="按周期排班"
          name="second">
          <ul class="rule-list">
            <li v-for="item in weekList"
              :key="item.id"
              @click="setRule(item)">
              {{item.name}}({{item.ruleSimple.join('')}})
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDispatchMemberList,
  setDispatchRedact,
  groupManageList,
  getPullList,
  getDeptstaff,
  deleteManage,
  getMemberList,
  addChangePlatoon,
  changemember,
  fixation,
  getFloor,
  schedule,
  platoonInfo,
  updateTable
} from "@/public/js/setting";

import { getMonthDay } from "@/public/js/util";
export default {
  components: {},
  props: {},
  data() {
    return {
      dates: "",
      floorManageList: [],
      dialogVisible: false,
      dialogGroupVisible: false,
      departmenVisible: false,
      responsibleVisible: false,
      selectRuleVisible: false,
      editFormData: "",
      title: "领班选择",
      foremanList: [],
      memberList: [],
      selectMemberData: [],
      floorId: "",
      showMemberList: "",
      type: 1,
      foremans: [],
      members: [],
      phontId: "",
      numId: "",

      manageList: [],
      title: "新增排班组",
      groupTitle: "编辑",
      typeId: "1",
      gdDataList: [
        {
          title: "每周一",
          value: "",
          fixationId: ""
        },
        {
          title: "每周二",
          value: "",
          fixationId: ""
        },
        {
          title: "每周三",
          value: "",
          fixationId: ""
        },
        {
          title: "每周四",
          value: "",
          fixationId: ""
        },
        {
          title: "每周五",
          value: "",
          fixationId: ""
        },
        {
          title: "每周六",
          value: "",
          fixationId: ""
        },
        {
          title: "每周日",
          value: "",
          fixationId: ""
        }
      ],
      xqList: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天"
      ],
      pullList: [],
      is: false,
      groupId: "", //班组id
      tableHeaderList: {},
      personNameList: [],
      monthStr: "",
      platioonDepts: [], //部门列表
      defaultProps: {
        children: "adminDepartments",
        label: "department"
      },
      userIds: [], //部门id
      fixationList: [],
      name: "", //排班组名称
      deptIds: [],
      floorList: [],
      searchKey: "",
      tableList: [],
      activeName: "first",
      nextList: [],
      weekList: [],
      handler_index: "",
      handler_data: "",
      sumList: [],
      isEdit: true,
      todayDate: "",
      isStore: true,
      activeNames: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    //关闭回调
    close(done) {
      if (!this.isStore) {
        this.$confirm("修改排班数据未保存, 是否继续关闭?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            done();
            this.isStore = true;
          })
          .catch(() => {
            return false;
          });
      } else {
        done();
      }
    },
    // 编辑
    edit(data) {
      this.name = data.name;
      this.dialogVisible = true;
      this.typeId = data.typeId + "";
      this.groupId = data.id;

      this._getDeptMember(data.id);
      this._getMemberList();
      this._fixation();
    },
    _background(time) {
      console.log(item);
    },
    // 获取固定排班的列表数据
    _fixation() {
      let fixationList = [];
      fixation({ id: this.groupId }).then(res => {
        console.log("res", res);
        fixationList = res.data.fixationList;
        fixationList.forEach((item, index) => {
          this.gdDataList[index].value = item.ruleId;
          this.gdDataList[index].fixationId = item.fixationId;
        });
        this._getPullList();
        console.log("this.gdDataList", this.gdDataList);
      });
    },
    // 获取排班部门以及负责人
    _getDeptMember(id) {
      changemember({ id: id }).then(res => {
        let platioonDepts = res.data.platioonDepts;
        this.deptIds = [];
        this.userIds = [];
        platioonDepts.forEach((item, index) => {
         
          if (item.check) {
            this.deptIds.push({
              deptName: item.deptName,
              deptId: item.deptId
            });
          }
          item.memberList.forEach(i => {
            if (i.check) {
              this.userIds.push({
                name: i.name,
                userId: i.userId
              });
            }
          });
        });
      });
    },
    // 获取人员列表
    _getDispatchMemberList(type) {
      getDispatchMemberList({
        foreman: type,
        floorId: this.floorId
      }).then(res => {
        if (type == 1) {
          this.foremanList = res.data.floorDepts;
          this.foremanList.forEach(item => {
            item.memberList.forEach(i => {
              this.foremans.push({
                userId: i.userId,
                name: i.name,
                check: i.check
              });
            });
          });
        } else {
          this.memberList = res.data.floorDepts;
          this.memberList.forEach(item => {
            item.memberList.forEach(i => {
              this.members.push({
                userId: i.userId,
                name: i.name,
                check: i.check
              });
            });
          });
        }
      });
    },
    // 选择人员
    selectOpen(type) {
      this.type = type;
      this.selectMemberData = [];
      this.title = type == 1 ? "领班人员选择" : "楼层服务人员选择";
      this.selectMemberData = type == 1 ? this.foremanList : this.memberList;
      console.log(this.selectMemberData);
      this.dialogVisibleSelect = true;
    },
    //新增编辑保存
    _sureGroup() {
      let deptIds = [];
      let userIds = [];
      if (!this.name) {
        this.$message.error("请输入排班组名称");
        return false;
      }
      if (!this.deptIds.length) {
        this.$message.error("请输入参与排班的部门");
        return false;
      }
      if (!this.userIds.length) {
        this.$message.error("请输入排班负责人");
        return false;
      }
      this.deptIds.forEach(item => {
        deptIds.push(item.deptId);
      });
      this.userIds.forEach(item => {
        userIds.push(item.userId);
      });
      let fixationList = [];
      let flag = false;
      if (this.typeId == 2) {
        // 表单验证
        this.gdDataList.forEach((item, index) => {
          if (!item.value) {
            flag = true;
            return false;
          }
          fixationList.push({
            fixationId: item.fixationId,
            ruleId: item.value,
            week: index + 1
          });
        });
        if (flag) {
          this.$message.error("请选择完整的固定班次规则");
          return false;
        }
      }
      let data = {
        groupId: this.groupId,
        name: this.name,
        typeId: this.typeId,
        deptIds: deptIds,
        userIds: userIds,
        fixationList: fixationList
      };
      addChangePlatoon(data).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.deptIds = [];
          this.userIds = [];
          this._groupManageList();
          this.gdDataList = [
            {
              title: "每周一",
              value: "",
              fixationId: ""
            },
            {
              title: "每周二",
              value: "",
              fixationId: ""
            },
            {
              title: "每周三",
              value: "",
              fixationId: ""
            },
            {
              title: "每周四",
              value: "",
              fixationId: ""
            },
            {
              title: "每周五",
              value: "",
              fixationId: ""
            },
            {
              title: "每周六",
              value: "",
              fixationId: ""
            },
            {
              title: "每周日",
              value: "",
              fixationId: ""
            }
          ];
        }
        this.dialogVisible = false;
      });
    },
    _sure() {},
    /*********** */
    //  获取班次下拉数据
    _getPullList() {
      getPullList().then(res => {
        this.pullList = res.data.pullList;
      });
    },
    // 获取排班管理列表
    _groupManageList() {
      groupManageList().then(res => {
        this.manageList = res.data.manageList;
      });
    },
    // 新增排班组
    addGroup() {
      this.dialogVisible = true;
      this.deptIds = [];
      this.userIds = [];
      this.typeId = "1";
      this.name = "";
      this.groupId = "";
      (this.gdDataList = [
        {
          title: "每周一",
          value: "",
          fixationId: ""
        },
        {
          title: "每周二",
          value: "",
          fixationId: ""
        },
        {
          title: "每周三",
          value: "",
          fixationId: ""
        },
        {
          title: "每周四",
          value: "",
          fixationId: ""
        },
        {
          title: "每周五",
          value: "",
          fixationId: ""
        },
        {
          title: "每周六",
          value: "",
          fixationId: ""
        },
        {
          title: "每周日",
          value: "",
          fixationId: ""
        }
      ]),
        this._getMemberList();
      this._getPullList();
    },
    selectDept() {
      this.departmenVisible = true;
      let arr = [];
      this.deptIds.forEach(item => {
        arr.push(item.deptId);
      });
      this.platioonDepts.forEach(item => {
        item.check = false;
        if (arr.indexOf(item.deptId) > -1) {
          item.check = true;
        }
      });
    },
    // 选择成员
    selectMember() {
      this.responsibleVisible = true;
      let arr = [];
      this.activeNames = []
      this.userIds.forEach(item => {
        arr.push(item.userId);
      });
      this.platioonDepts.forEach((item,index) => {
        this.activeNames.push(index)
        item.memberList.forEach(i => {
          i.check = false;
          if (arr.indexOf(i.userId) > -1) {
            i.check = true;
          }
        });
      });
    },
    // 获取楼层列表数据
    _getFloor() {
      getFloor().then(res => {
        this.floorList = res.data.floorList;
        console.log(this.floorList);
      });
    },
    // 获取表格数据
    _schedule(type) {
      schedule({
        groupId: this.groupId,
        month: this.dates,
        name: this.searchKey,
        floorId: this.floorId
      }).then(res => {
        this.personNameList = res.data.memberList;
        this.sumList = res.data.sumList;
        if (type != 1) {
          return false;
        } else {
          this.$message({
            message: "还原成功",
            type: "success"
          });
        }
      });
    },
    // 获取 规则列表数据
    _platoonInfo() {
      platoonInfo().then(res => {
        console.log(res);
        this.weekList = res.data.weekList;
        this.nextList = res.data.nextList;
      });
    },
    // 编辑排班
    editPlatoon(id) {
      this.dialogGroupVisible = true;
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let dd = date.getDate();
      this.dates = year + "-" + month;
      this.monthStr = `${year}年${parseInt(month)}月`;
      this.todayDate = new Date(year + "-" + month + "-" + dd).getTime();

      this.tableHeaderList = getMonthDay(year + "-" + month);

      this.groupId = id;
      this._getFloor();
      this._schedule();
      this._platoonInfo();
    },
    dateChange(date) {
      let year = date.split("-")[0];
      let month = date.split("-")[1];
      this.dates = year + "-" + month;
      this.tableHeaderList = getMonthDay(this.dates);
      this.monthStr = `${year}年${month}月`;
      this._schedule();
    },
    // 保存排班表规则
    _suerTable() {
      let platoonList = [];

      this.personNameList.forEach(item => {
        item.schedulingList.forEach(i => {
          if (i.ruleId) {
            platoonList.push({
              tableId: i.id,
              groupId: this.groupId,
              userId: item.userId,
              scheduling_Time: i.schedulingDate,
              ruleId: i.ruleId
            });
          }
        });
      });
      console.log(platoonList);
      updateTable({ platoonList }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          this.dialogGroupVisible = false;
          this.isStore = true;
        }
        this._schedule();
      });
    },
    // 编辑每天规则
    _editRule(index, item) {
      this.handler_index = index;
      this.handler_data = item;
      let ruleId = this.handler_data.schedulingList[this.handler_index].ruleId;
      let _today = this.handler_data.schedulingList[this.handler_index]
        .schedulingDate;
      if (new Date(_today).getTime() < this.todayDate) {
        this.$message.error("排班时间不能为历史时间");
        return false;
      }
      this.activeName = "first";
      this.selectRuleVisible = true;
    },
    //选择（天数，周期规则确认）
    setRule(_item) {
      // 按天
      if (_item.simple) {
        if (this.handler_data.schedulingList[this.handler_index].ruleId) {
          this.$confirm("此操作将覆盖改天排班规则, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.handler_data.schedulingList[this.handler_index].ruleSimple =
                _item.simple;
              this.handler_data.schedulingList[this.handler_index].ruleId =
                _item.id;
            })
            .catch(() => {
              this.selectRuleVisible = true;
              return false;
            });
        } else {
          this.handler_data.schedulingList[this.handler_index].ruleSimple =
            _item.simple;
          this.handler_data.schedulingList[this.handler_index].ruleId =
            _item.id;
        }
      } else {
        //按照周期

        let flag = false;
        _item.times.forEach((item, index) => {
          let value = this.handler_data.schedulingList[
            this.handler_index + index
          ];
          if (value.ruleId) {
            flag = true;
            return false;
          }
        });
        if (flag) {
          this.$confirm("此操作将覆盖改天排班规则, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              _item.times.forEach((item, index) => {
                this.handler_data.schedulingList[
                  this.handler_index + index
                ].ruleSimple =
                  item.simple;
                this.handler_data.schedulingList[
                  this.handler_index + index
                ].ruleId =
                  item.ruleId;
              });
            })
            .catch(() => {
              this.selectRuleVisible = true;
              return false;
            });
        } else {
          _item.times.forEach((item, index) => {
            this.handler_data.schedulingList[
              this.handler_index + index
            ].ruleSimple =
              item.simple;
            this.handler_data.schedulingList[
              this.handler_index + index
            ].ruleId =
              item.ruleId;
          });
        }
      }
      this.selectRuleVisible = false;
      this.isStore = false;
    },

    _set(item, i) {
      console.log(item);
    },
    // 获取部门列表数据
    _getMemberList() {
      getMemberList().then(res => {
        this.platioonDepts = res.data.platioonDepts;
        console.log(this.platioonDepts);
      });
    },
    // 删除
    _delete(id) {
      this.$confirm("此操作将永久删除该排班组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteManage({ id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
          this._groupManageList();
        });
      });
    },

    handleCheckChange(value, node) {
      this.dg(node.checkedKeys);
    },
    // 部门选择确定
    _sureDepartment() {
      this.deptIds = [];
      this.platioonDepts.forEach(item => {
        if (item.check) {
          this.deptIds.push({
            deptName: item.deptName,
            deptId: item.deptId
          });
        }
      });
      if (!this.deptIds.length) {
        this.$message.error("请选择排班的部门");
        return false;
      }

      this.departmenVisible = false;
    },
    // 负责人确认
    _sureMember() {
      this.userIds = [];
      this.platioonDepts.forEach(item => {
        item.memberList.forEach(i => {
          if (i.check) {
            this.userIds.push({
              userId: i.userId,
              name: i.name
            });
          }
        });
      });
      if (!this.userIds.length) {
        this.$message.error("请选择排班负责人");
        return false;
      }
      this.responsibleVisible = false;
    }
  },
  created() {
    this._groupManageList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  .editDialog {
  }
  .content {
    & > ul {
      .title {
        padding: 15px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .member-list {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    & > li {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
  table {
    border-collapse: collapse;
    text-align: center;
  }
  tr.style {
    background: #f2f2f2;
  }
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    width: auto;
    padding: 0 11px;
    font-size: 12px;
    &.style {
      background: #f2f2f2;
    }
  }
  .hover {
    &:hover {
      background: #6d2377;
      color: #fff;
      cursor: pointer;
    }
  }
  .list {
    & > li {
      float: left;
      margin-right: 10px;
      padding-bottom: 10px;
    }
  }
  .wrap {
    display: flex;
    flex-wrap: wrap;
    & > li {
      padding: 15px;
      width: 20%;
      //border-bottom: 1px solid #ebeef5;
      p {
        & .title {
          font-size: 16px;
        }
      }
    }
    .memberList {
      & > li {
        float: left;
        margin-right: 20px;
      }
    }
  }
  .rule-list {
    & > li {
      text-align: center;
      height: 40px;
      line-height: 40px;
      color: #fff;
      background: #6d2377;
      margin-bottom: 20px;
      border-radius: 8px;
      cursor: pointer;
    }
  }
  .disable {
    background: #f2f2f2;
  }
  .isToday {
    color: green !important;
    font-weight: bold;
  }
  .isWeekend {
    color: red;
    font-weight: bold;
  }
  .el-checkbox{
    margin-left:0;
    margin-right:20px;
  }
}
</style>